<template>
  <div class="app-container">
    <el-card shadow="hover" class="search_card">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="margin-left: 20px;"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleSearchList"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          @click="cancelData"
        >
          重置
        </el-button>
      </div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-form
          ref="params"
          :model="params"
          label-width="100px"
          size="small"
          class="searchForm"
        >
          <el-col :span="6">
            <el-form-item label="课程名称:" prop="courseName">
              <el-input
                v-model="params.courseName"
                size="small"
                clearable
                @clear="handleSearchList"
              ></el-input>
            </el-form-item>
          </el-col>
         
          <el-col :span="6">
            <el-form-item label="主推课程:" prop="mainPush">
              <el-select v-model="params.mainPush" placeholder="是否为主推课程" clearable @change="handleSearchList">
                <el-option
                  v-for="item in mainOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="热门课程:" prop="recommend">
              <el-select v-model="params.recommend" placeholder="是否为热门课程" clearable @change="handleSearchList">
                <el-option
                  v-for="item in hotOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="热点必看:" prop="mustSee">
              <el-select v-model="params.mustSee" placeholder="是否为热点必看课程" clearable @change="handleSearchList">
                <el-option
                  v-for="item in seeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程分类:" prop="categoryId">
              <treeselect
                v-model="params.categoryId"
                :options="loadOptions"
                :normalizer="normalizer"
                noChildrenText="暂无可选课程"
                placeholder="请选择课程分类"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="创建时间:" prop="createTime">
              <el-date-picker
                v-model="params.createTime"
                type="datetime"
                placeholder="选择日期时间"
                @change="createTime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
        </el-form>
      </el-row>
    </el-card>

    <el-card shadow="hover" style="margin-top: 20px;">
      <div class="container">
        <i class="el-icon-menu" />
        <span class="mr10">课程列表</span>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          class="mr10"
          v-hasPermi="['school:studyList:add']"
          >新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          class="handle-del mr10"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['school:studyList:del']"
          >批量删除</el-button
        >

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            label="课程名称"
            min-width="260"
            align="center"
            prop="courseName"
          >
          </el-table-column>
          <el-table-column label="课程类型" align="center" width="100">
            <template slot-scope="scope">
              <!-- {{ getCourseName(scope.row.categoryId) }} -->
              {{ scope.row.categoryName }}
            </template>
          </el-table-column>
          <el-table-column label="课程封面" align="center" width="140">
            <template slot-scope="scope">
              <img v-if="scope.row.logoPic !== ''" :src="showUrl + scope.row.logoPic" alt="" class="study_pic" />
              <div type="info" v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="证书名称" align="center" width="150" prop="nameCertificate" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="证书模板" align="center" width="140">
            <template slot-scope="scope">
              <img
                v-if="scope.row.certificatePic !== ''"
                :src="showUrl + scope.row.certificatePic"
                alt=""
                class="study_pic"
              />
               <div type="info" v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="keynoteMan"
            label="主讲人"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="detail"
            label="课程介绍"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="teacherName"
            label="老师名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="contents"
            label="老师介绍"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="是否为主推课程"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.mainPush == 1">主推课程</el-tag>
              <el-tag type="info" v-else>非主推课程</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="是否为热门课程"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.recommend == 1">热门课程</el-tag>
              <el-tag type="info" v-else>非热门课程</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="是否为要点必看"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.mustSee == 1">要点必看</el-tag>
              <el-tag type="info" v-else>普通课程</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="纸质证书费用"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.cost !== null"> {{scope.row.cost}}元</div>
              <div type="info" v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column
            label="及格分"
            align="center"
            width="100"
          >
          <template slot-scope="scope">
              <div v-if="scope.row.passingScore !== null"> {{scope.row.passingScore}}</div>
              <div type="info" v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column
            label="考试时间/分钟"
            align="center"
            width="100"
          >
          <template slot-scope="scope">
               <div v-if="scope.row.examTime !== null"> {{ scope.row.examTime }}分/题</div>
               <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="选择题分值" align="center" width="100">
            <template slot-scope="scope">
               <div v-if="scope.row.choiceScore !== null"> {{ scope.row.choiceScore }}分/题</div>
               <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="判断题分值" align="center" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.judgeScore !== null">  {{ scope.row.judgeScore }}分/题</div>
               <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column
            label="选择题数量"
            align="center"
            width="100"
          >
          <template slot-scope="scope">
              <div v-if="scope.row.choiceQuestion !== null">  {{ scope.row.choiceQuestion }}分/题</div>
               <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column
            label="判断题数量"
            align="center"
            width="100"
          >
          <template slot-scope="scope">
              <div v-if="scope.row.judgeQuestion !== null">  {{ scope.row.judgeQuestion }}分/题</div>
               <div v-else>--</div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="collection"
            label="收藏人数"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="评论数量"
            align="center"
            width="100"
            prop="commentCount"
          >
          </el-table-column>
          <el-table-column
            prop="studyNum"
            label="学习人数"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="overNum"
            label="完成人数"
            align="center"
            min-width="100"
          ></el-table-column> -->

          <el-table-column label="创建时间" align="center" width="160">
            <template slot-scope="scope">{{
              formatDate(scope.row.createTime)
            }}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="265"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-s-platform"
                @click="handleStudy(scope.$index, scope.row)"
                >学习</el-button
              >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                v-hasPermi="['school:studyList:update']"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['school:studyList:del']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="pageTotal > 0"
            :total="pageTotal"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="fetchCourseList"
          />
        </div>
      </div>
    </el-card>

    <!-- 新增编辑 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form
        :rules="rules2"
        ref="ruleForm"
        :model="formData"
        label-width="130px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称：" prop="courseName">
              <el-input v-model="formData.courseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item  label="seo标题">
                <el-input v-model="formData.seoTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="keywords关键词">
                <el-input v-model="formData.keywords"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="description描述">
                <el-input v-model="formData.description"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择分类：" prop="categoryId">
              <treeselect
                v-model="formData.categoryId"
                :options="loadOptions"
                :normalizer="normalizer"
                noChildrenText="暂无可选课程分类"
                :disable-branch-nodes="true"
                placeholder="请选择课程分类"
                style="width: 260px;"
                @select="select"
              />
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="证书名称：" prop="nameCertificate">
              <el-input v-model="formData.nameCertificate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主推课程：" prop="mainPush">
              <el-radio-group v-model="formData.mainPush">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="-1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="热门课程：" prop="recommend">
              <el-radio-group v-model="formData.recommend">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="-1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="热点必看：" prop="mustSee">
              <el-radio-group v-model="formData.mustSee">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="-1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="主讲人：" prop="keynoteMan">
              <el-input v-model="formData.keynoteMan"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="学习人数">
              <el-input v-model="formData.studyNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="课程介绍：" prop="detail">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3 }"
                v-model="formData.detail"
                placeholder="请输入课程介绍"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="老师姓名：" prop="keynoteMan">
              <el-input v-model="formData.teacherName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="老师介绍：" prop="detail">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3 }"
                v-model="formData.contents"
                placeholder="请输入老师介绍"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="8">
             <el-form-item label="是否考试" prop="isExams">
                 <el-radio-group v-model="formData.isExams">
                    <el-radio :label="1" >考试</el-radio>
                    <el-radio :label="0" >不考试</el-radio>
                 </el-radio-group>
            </el-form-item>
           </el-col>
            <el-col :span="8">
            <el-form-item label="是否快进" prop="isFast">
                 <el-radio-group v-model="formData.isFast">
                    <el-radio :label="1" >快进</el-radio>
                    <el-radio :label="0">不快进</el-radio>
                 </el-radio-group>
            </el-form-item>
             </el-col>
            <el-col :span="8">
            <el-form-item label="是否跳节" prop="isSkip">
                 <el-radio-group v-model="formData.isSkip">
                    <el-radio :label="1" >跳</el-radio>
                    <el-radio :label="0">不跳</el-radio>
                 </el-radio-group>
            </el-form-item>
           </el-col>
           <el-col :span="8">
            <el-form-item label="是否倍速" prop="isSpeed">
                 <el-radio-group v-model="formData.isSpeed">
                    <el-radio :label="1" >是</el-radio>
                    <el-radio :label="0">否</el-radio>
                 </el-radio-group>
            </el-form-item>
           </el-col>
           <el-col :span="8">
            <el-form-item label="是否有证书" prop="isCer">
                 <el-radio-group v-model="formData.isCer">
                    <el-radio :label="1" >有</el-radio>
                    <el-radio :label="0">没有</el-radio>
                 </el-radio-group>
            </el-form-item>
           </el-col>
         <div v-if="formData.isExams == 1">
            <el-col :span="12">
              <el-form-item label="考试及格分：" prop="passingScore">
                <el-input v-model="formData.passingScore">
                  <template slot="append">分</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试时间(分钟)：" prop="examTime">
                <el-input-number
                  v-model="formData.examTime"
                  controls-position="right"
                  :min="1"
                  :max="120"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择题分数：" prop="choiceScore">
                <el-input v-model="formData.choiceScore">
                  <template slot="append">/ 题</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判断题分数：" prop="judgeScore">
                <el-input v-model="formData.judgeScore">
                  <template slot="append">/ 题</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择题数量：" prop="choiceQuestion">
                <el-input v-model="formData.choiceQuestion">
                  <template slot="append">题</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判断题数量：" prop="judgeQuestion">
                <el-input v-model="formData.judgeQuestion">
                  <template slot="append">题</template>
                </el-input>
              </el-form-item>
            </el-col>
         </div>
         <div v-if="formData.isCer == 1">
            <el-col :span="18">
              <el-form-item label="纸质证书费用：" prop="cost">
                <el-input
                  v-model="formData.cost"
                  placeholder="请输入纸质证书费用"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </div>
                    <el-col :span="12">
            <el-form-item label="课程封面：" prop="logoPic">
              <el-upload
                :headers="headers"
                :action="`${baseUrl}/mba/course/upload`"
                :show-file-list="false"
                :on-success="uploadLogoPicUrl"
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="formData.logoPic"
                  :src="showUrl + formData.logoPic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.isCer == 1" :span="12">
            <el-form-item label="证书模板：" prop="certificatePic">
              <el-upload
                :headers="headers"
                :action="`${baseUrl}/mba/course/upload`"
                :show-file-list="false"
                :on-success="uploadCertificatePic"
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="formData.certificatePic"
                  :src="showUrl + formData.certificatePic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="medium">取消</el-button>
        <el-button @click="submitForm()" type="primary" size="medium"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryCourseCate,
  queryCourseList,
  addCourse,
  updateCourse,
  delCourse
} from "@/api/school/school";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  props: [],
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      radio:1,
      // 删除砖用
      multiple: true,
      ids: [],
      openFlag: true,

      mainOptions: [
        {
          id: -1,
          label: "否"
        },
        {
          id: 1,
          label: "是"
        }
      ],
      hotOptions: [
        {
          id: -1,
          label: "否"
        },
        {
          id: 1,
          label: "是"
        }
      ],
      seeOptions: [
        {
          id: -1,
          label: "否"
        },
        {
          id: 1,
          label: "是"
        }
      ],
      loadOptions: [],
      orderNum_show: false,
      title: "",
      rules2: {
        categoryId: [
          { required: true, message: "请选择分类", trigger: "blur" }
        ],
        courseName: [
          { required: true, message: "请输入课程名称", trigger: "blur" }
        ],
        nameCertificate: [
          { required: true, message: "请输入证书名称", trigger: "blur" }
        ],
        detail: [
          { required: true, message: "请输入课程介绍", trigger: "blur" }
        ],
        logoPic: [
          { required: true, message: "请上传课程图片", trigger: "blur" }
        ],
        certificatePic: [
          { required: true, message: "请上传证书图片", trigger: "blur" }
        ],
        // collection: [
        //   { required: true, message: "请输入收藏人数", trigger: "blur" }
        // ],
        // commentCount: [
        //   { required: true, message: "请输入评论数量", trigger: "blur" }
        // ],
        teacherName: [
          { required: true, message: "请输入老师姓名", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入老师介绍", trigger: "blur" }
        ],
        mustSee: [
          { required: true, message: "请选择是否为要点必看课程", trigger: "blur" }
        ],
        mainPush: [
          { required: true, message: "请选择是否为主推课程", trigger: "blur" }
        ],
        recommend: [
          { required: true, message: "请选择是否为热门课程", trigger: "blur" }
        ],
        keynoteMan: [
          { required: true, message: "请输入主讲人姓名", trigger: "blur" }
        ],
        passingScore: [
          { required: true, message: "请输入考试及格分", trigger: "blur" }
        ],
        examTime: [
          { required: true, message: "请设置考试时长", trigger: "blur" }
        ],
        choiceScore: [
          { required: true, message: "请设置选择题每题分值", trigger: "blur" }
        ],
        judgeScore: [
          { required: true, message: "请设置判断题每题分值", trigger: "blur" }
        ],
        choiceQuestion: [
          { required: true, message: "请设置选择题数量", trigger: "blur" }
        ],
        judgeQuestion: [
          { required: true, message: "请设置判断题数量", trigger: "blur" }
        ],
        cost: [
          { required: true, message: "请设置获纸质证书所需的费用", trigger: "blur" }
        ],
        isExams:[
          { required: true, message: "请设置是否考试", trigger: "blur" }
        ],
        isFast:[
          { required: true, message: "请设置是否快进", trigger: "blur" }
        ],
        isSkip:[
          { required: true, message: "请设置是否跳节", trigger: "blur" }
        ],
        isSpeed:[
          { required: true, message: "请设置是否倍速", trigger: "blur" }
        ],
        isCer:[
          { required: true, message: "请设置是否有证书", trigger: "blur" }
        ],
      },
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        courseName: undefined,
        categoryId: undefined,
        mainPush: undefined,
        mustSee: undefined,
        recommend: undefined
      },
      // formData:{
      //   mainPush:'1'
      // },
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        logoPic: "",
        certificatePic: "",
      },
      paramsFlag: 0,
      checkCourseCate: []
    };
  },
  computed: {},
  created() {
    this.fetchCourseList();
    this.fetchCourseCate();
  },
  mounted() {},
  watch: {
    'params.categoryId': 'changeCate'
  },
  methods: {
    // 上传图片
    uploadLogoPicUrl(res) {
      this.formData.logoPic = res.data;
    },
    uploadCertificatePic(res) {
      this.formData.certificatePic = res.data;
    },
    // 获取课程分类
    fetchCourseCate() {
      queryCourseCate({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.checkCourseCate =  res.rows;
        this.loadOptions = this.handleTree(res.rows, "id").map(item => {
          if (!item.children) {
            item['children'] = []
          }
          return item
        })
      });
    },
    changeCate(val){
      this.handleSearchList();
    },
    
    // 处理课程分类数据结构
    normalizer(node) {
      // if (node.children == null || node.children == "null") {
      //   delete node.children;
      // }
      // if (node.children && !node.children.length) {
      //   delete node.children;
      // }
      return {
        id: node.id,
        label: node.categoryName,
        children: node.children
      };
    },
    select(node){
      console.log(node)
      if(node.hierarchy == 1){
        this.formData.categoryId = null;
        this.$forceUpdate();
      }
    },

    // 处理数据得到课程分类名称
    getCourseName(id) {
      let cate = this.checkCourseCate.find(item => {
        return item.id == id;
      });
      if (cate == undefined) {
        return null;
      } else {
        return cate.categoryName;
      }
    },
    // 处理时间格式化
    formatDate(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    cancel(){
      this.dialogVisible = false;
      this.fetchCourseList();
    },
    // 新增修改的方法
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if(this.formData.seoTitle == ''||this.formData.seoTitle == null){
              this.formData.seoTitle = `${this.formData.courseName},${this.formData.nameCertificate}-玖零零幺质量商学院`
          }
          if(this.formData.keywords == ''||this.formData.keywords == null){
              this.formData.keywords = `${this.formData.courseName},质量提升课程,食品安全课程,知识产权课程,特种设备课程,审核员课程，玖零零幺质量商学院`
          }
          if(this.formData.description == ''||this.formData.description == null){
              this.formData.description = this.formData.detail.substring(0,100)
          }
          if (this.formData.id == undefined) {
            addCourse(this.formData).then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success(`新增成功`);
                this.dialogVisible = false;
                this.fetchCourseList();
              }
            });
          } else {
            updateCourse(this.formData).then(res => {
              if (res.code == 200) {
                this.$message.success(`修改成功`);
                this.dialogVisible = false;
                this.uploading = false;
                this.fetchCourseList();
              }
            });
          }
        }
      });
    },

    // 打开搜索
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    // 点击搜索
    handleSearchList() {
      this.params.pageNum = 1;
      this.fetchCourseList();
    },
    // 重置搜索框
    cancelData() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        courseName: undefined,
        categoryId: undefined,
        mainPush: undefined,
        recommend: undefined
      }
      this.fetchCourseList();
    },
    handleAdd() {
      this.formData = {
        logoPic: "",
        certificatePic: "",
        isExams:1,
        isFast:1,
        isSkip:1,
        isSpeed:1,
        isCer:1,
        mainPush:1,
        recommend:1,
        mustSee:1
      };
      this.dialogVisible = true;
      this.orderNum_show = false;
      this.title = "新增";
    },
    handleEdit(index, row) {
      this.formData = row;
      this.dialogVisible = true;
      this.orderNum_show = true;
      this.title = "编辑";
    },
    handleStudy(index, row) {
      console.log("跳转到视频");
      this.$router.push({
        path: "/school/video",
        query: { videoId: row.id }
      });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      // console.log(row.id);
      const id = row.id || this.ids.join(",");
      console.log(id);
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("确定删除");
          delCourse(id).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.fetchCourseList();
              this.msgSuccess("删除成功");
            }
          });
        })
        .catch(function() {});
    },

    //获取数据
    fetchCourseList() {
      console.log(this.params)
      queryCourseList(this.params)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.rows;
            this.pageTotal = res.total;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.fetchCourseList();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.fetchCourseList();
    }
  }
};
</script>

<style>
.search-box {
  margin: 20px;
}
.handle-box {
  margin-bottom: 10px;
}
.table {
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 20px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 90px;
  margin: auto;
}

.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.search_card {
  overflow: unset !important;
}
</style>
